<template>
  <div class="scrollBox">
    <div class="itemShow" v-for="item in showList" :key="item.id" :src-index="item.id">
      {{ item.id }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
// 全部数据
const allList = ref([] as any)
// 列表中显示的数据
const showList = ref([] as any)
// 分页一次性请求数
const pageNum = 8
// 当前已请求数
let pageIndex = 1
// Observe实例
let lazyImageObserver: any
// 是否是初始化状态
let isFirstInit: any = true

// 接口获取数据 3s能拿到
const getData = (size: number, index: number) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('获取数据列表', size * (index - 1) + 1);
      for (let i = 0; i < size; i++) {
        let obj: any = {
          id: size * (index - 1) + i
        }
        allList.value.push(obj)
      }
      pageIndex = pageIndex + 1
      resolve(true)
    }, 3000)
  })
}



// 监听某某显示
const obserChange = async (entry: any) => {
  // 拿到数据
  const nowAddNumber = parseInt(entry.target.attributes[2].value)

  console.log("当前show：", nowAddNumber);

  // 如果是初始化状态，不做任何操作
  if (isFirstInit) return

  // 如果当前是最后一条前两条，就要去加载下一页数据
  if (nowAddNumber === allList.value.length - 1) {
    // 调取接口
    await getData(pageNum, pageIndex)
  }
  // 如果nowAddNumber是showList中的最后一个，那么需要对showList最后做添加操作
  if (nowAddNumber === showList.value[showList.value.length - 1].id) {
    // 添加最后一个
    showList.value.push(allList.value[nowAddNumber + 1])
    nextTick(() => {
      // 给最后一个绑定监听
      const imgItem = document.querySelectorAll(".itemShow")[showList.value.length - 1]
      lazyImageObserver.observe(imgItem);

      // 给第一个去除监听
      const xxxx = document.querySelectorAll(".itemShow")[0]
      lazyImageObserver.unobserve(xxxx);

      // 删掉第一个
      showList.value.shift()
    })
  }
  // 如果nowAddNumber是showList中的第一个，那么需要对showList最前面做添加
  else if (nowAddNumber === showList.value[0].id) {
    if (nowAddNumber === 0) return

    // 添加最后一个
    showList.value.unshift(allList.value[nowAddNumber - 1])
    nextTick(() => {
      // 给第一个绑定监听
      const imgItem = document.querySelectorAll(".itemShow")[0]
      lazyImageObserver.observe(imgItem);

      // 给最后一个去除监听
      const xxxx = document.querySelectorAll(".itemShow")[showList.value.length - 1]
      lazyImageObserver.unobserve(xxxx);

      // 删掉最后一个
      showList.value.pop()
    })
  }


}


// 初始化第一次使用
const InitObserve = () => {
  return new Promise((resolve) => {
    const imgItem = document.querySelectorAll(".itemShow")
    lazyImageObserver = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          obserChange(entry)
        }
      });
    });
    imgItem.forEach(function (lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
    nextTick(() => {
      resolve(true)
    })
  })
}

const _init = async () => {
  // 1. 先获取第一页数据
  await getData(pageNum, pageIndex)
  showList.value = [...allList.value]
  nextTick(async () => {
    // 页面渲染完成，开始绑定监听事件
    await InitObserve()
    // 等待初始化完成，记录初始化完成
    isFirstInit = false
  })
}
onMounted(() => {
  _init()
})

</script>
<style scoped lang='scss'>
.scrollBox {
  position: fixed;
  width: 700px;
  height: 500px;
  left: 100px;
  top: 100px;
  background-color: aquamarine;
  overflow-y: scroll;

  .itemShow {
    height: 200px;
    margin-bottom: 10px;
    background-color: burlywood;
  }
}
</style>